<template>
  <div class="panel">
    <span class="icon-top" v-if="$props.show"></span>
    <span class="icon-top-right" v-if="$props.show"></span>
    <span class="icon-bottom" v-if="$props.show"></span>
    <span class="icon-bottom-right" v-if="$props.show"></span>
    <!-- 样式二 -->
    <span class="icon-top-bleft" v-if="!$props.show"></span>
    <span class="icon-top-bright" v-if="!$props.show"></span>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "li-panel",
    props: {
      "show": {
        default: true
      }
    }
  }
</script>

<style scoped lang="scss">
  .panel {
    position: relative;
    background-color: rgba(2, 30, 52, 0.4);
    .icon-top {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      width: 22px;
      height: 34px;
      border-left: 2px solid #fff;
      border-top: 2px solid #fff;
    }
    .icon-top-right {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
      width: 22px;
      height: 34px;
      border-right: 2px solid #fff;
      border-top: 2px solid #fff;
    }
    .icon-bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 1;
      width: 34px;
      height: 34px;
      border-left: 2px solid #fff;
      border-bottom: 2px solid #fff;
    }
    .icon-bottom-right {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 1;
      width: 34px;
      height: 34px;
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
    }
    .icon-top-bleft {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 1;
      width: 22px;
      height: 34px;
      border-bottom: 2px solid #fff;
      border-left: 2px solid #fff;
    }
    .icon-top-bright {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 1;
      width: 22px;
      height: 34px;
      border-bottom: 2px solid #fff;
      border-right: 2px solid #fff;
    }
    .head {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      width: 100%;
      height: 24px;
      background-color: #006e6e;
    }
  }

  @media screen and (max-width: 1439px) {
    .panel {
      .icon-top {
        width: 18px;
        height: 27.81px;
      }
      .icon-bottom {
        width: 28px;
        height: 28px;
      }
    }
  }
</style>
